<template>
  <div>
    <vue-particles :clickEffect="false"></vue-particles>
    <div class="login-box">
        <h2>XXXXXX图书管理系统</h2>
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginForm"
      >
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder='请输入用户名'></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type='password' v-model="loginForm.password" placeholder='请输入密码'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleClick" type='primary'>{{isLoginStatus ? '登&emsp;&emsp;陆' : '注&emsp;&emsp;册'}}</el-button>
        </el-form-item>
        <el-form-item>
          <a @click="isLoginStatus = !isLoginStatus" class="goreg" href="javascript:">{{isLoginStatus ? '去注册' : '去登陆'}}</a>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
    name: 'login',
    data(){
        return {
            loginForm: {
                username: 'admin',
                password: '111111'
            },
            loginFormRules: {
                username: [
                    {type: 'string', required: true, message: '用户名不能为空', trigger: 'blur'}
                ],
                password: [
                    {type: 'string', required: true, message: '密码不能为空', trigger: 'blur'}
                ]
            },
            isLoginStatus: true
        }
    },
    watch: {
        isLoginStatus(){
            this.loginForm = {
                username: '',
                password: ''
            }
        }
    },
    methods: {
        async handleClick(){
            // 登陆 or 注册
            if(this.isLoginStatus){
                // 登陆
                const { data } = await this.http({
                    method: 'post',
                    url: '/api/login',
                    data: this.loginForm
                })
                if(data.errno !== 0){
                    return this.msg({
                        type: 'error',
                        message: data.message
                    })
                }
                this.msg({
                    message: data.message,
                    type: 'success',
                    onClose: () => {
                        localStorage.setItem('BOOK_M_TOKEN', data.data.token)
                        localStorage.setItem('USERINFO', JSON.stringify(data.data.userinfo))
                        if(this.$route.query.redirect){
                            this.$router.replace(this.$route.query.redirect)
                        }else {
                            this.$router.push('/')
                        }
                    }
                })
            }else {
                // 注册
                const { data } = await this.http({
                    method: 'post',
                    url: '/api/register',
                    data: this.loginForm
                })
                if(data.errno !== 0){
                    return this.msg({
                        type: 'error',
                        message: data.message
                    })
                }
                this.isLoginStatus = true
            }
        }
    }
}
</script>

<style lang='less' scoped>
.login-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 20px 50px;
    background-color: rgba(0,0,0,0.3);
    box-shadow: 0 0 5px 10px rgba(0,0,0,0.3);

    h2 {
        color: #fff;
        text-align: center;
    }

    .el-button {
        display: block;
        width: 100%;
    }

    .el-form-item:last-child {
        margin-bottom: 0;
    }

    .goreg {
        color: #fff;
    }
}
</style>
